<style lang="scss" scoped>
.register {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: url("../assets/loginBg.jpg") center/cover no-repeat;
    .registerBox {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -60%);
        width: 520px;
        background-color: #fff;
    }
}
</style>

<template>
<div class="register">
	<div class="registerBox modelBox">
		<div class="modelHead">实 名 注 册</div>

		<div class="modelBody">
			<el-form class="ruleForm" label-width="120px" ref="step1Form" :model="ruleForm" :rules="rules" v-show="step.step1Show">
				<el-form-item label="用户名" prop="userName">
					<el-input v-model="ruleForm.userName" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="userPass">
					<el-input type="password" v-model="ruleForm.userPass" placeholder="请输入密码" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="重复密码" prop="userPass1">
					<el-input type="password" v-model="ruleForm.userPass1" placeholder="请再次输入密码" auto-complete="off"></el-input>
				</el-form-item>

				<el-button type="primary" class="submit" @click="nextStep1('step1Form')">下一步</el-button>
			</el-form>

			<el-form class="ruleForm" label-width="120px" ref="step2Form" :model="ruleForm" :rules="rules" v-show="step.step2Show">
				<el-form-item label="真实姓名" prop="realname">
					<el-input v-model="ruleForm.realname" placeholder="请输入您的真实姓名" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="身份证号码" prop="idcard">
					<el-input v-model="ruleForm.idcard" placeholder="请输入您的身份证号码" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号码" prop="phone">
					<el-input v-model="ruleForm.phone" placeholder="请输入您的手机号码" auto-complete="off"></el-input>
				</el-form-item>

				<el-row :gutter="20">
					<el-col :span="8" :offset="4">
						<el-button type="primary" class="submit" @click="prevStep2('step2Form')">上一步</el-button>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" class="submit" @click="nextStep2('step2Form')">下一步</el-button>
					</el-col>
				</el-row>
			</el-form>

			<el-form class="ruleForm" label-width="120px" ref="step3Form" :model="ruleForm" :rules="rules" v-show="step.step3Show">
				<el-form-item label="主体类型" prop="type">
					<el-select v-model="ruleForm.type" placeholder="主体类型" select="Z">
						<el-option label="法人" value="F"></el-option>
						<el-option label="自然人" value="Z"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="自然人注册文件" prop="zzrFileName">
					<el-input :disabled="true" v-model="$store.state.register.upFile['zzrFileName'].name" placeholder="请选择自然人注册文件" auto-complete="off">
						<img-wkUpfile slot="append" fileName="zzrFileName"></img-wkUpfile>
					</el-input>
				</el-form-item>
				<transition name="fade">
					<el-form-item label="法人注册文件" prop="frFileName" v-if="ruleForm.type=='F'">
						<el-input :disabled="true" v-model="$store.state.register.upFile['frFileName'].name" placeholder="请选择法人注册文件" auto-complete="off">
							<img-wkUpfile slot="append" fileName="frFileName"></img-wkUpfile>
						</el-input>
					</el-form-item>
				</transition>
				<transition name="fade">
					<el-form-item label="委托企业" prop="wtqy" v-if="ruleForm.type=='F'">
						<el-input v-model="ruleForm.wtqy" placeholder="请输入委托企业" auto-complete="off"></el-input>
					</el-form-item>
				</transition>

				<el-row :gutter="20">
					<el-col :span="8" :offset="4">
						<el-button type="primary" class="submit" @click="prevStep3('step3Form')">上一步</el-button>
					</el-col>
					<el-col :span="8">
						<el-button type="primary" class="submit" @click="register('step3Form')">注册</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
	</div>
</div>
</template>

<script>
import Util from '../libs/util'
import imgWkUpfile from '../components/imgWkUpfile'

export default {
	data() {
		return {
			step: {
				step1Show: true,
				step2Show: false,
				step3Show: false,
			},
			ruleForm: {
				userName: 'wukai900610',
				userPass: 'wk051105',
				userPass1: 'wk051105',
				realname: '吴凯',
				idcard: '321183199006103813',
				phone: '13770974621',
				type: 'Z',
				wtqy: ''
			},
			rules: {
				userName: [{
					validator: (rule, value, callback) => {
						if (!value) {
							return callback(new Error('请输入姓名'));
						}

						if (value.toString().length < 2 || value.toString().length > 18) {
							return callback(new Error('用户名为2-20位字母数字组合'));
						}

						this.$store.dispatch('commonPage_checkUsername', {
							'username': value
						}).then((data) => {
							if (data.status == 'y') {
								this.$message({
									message: '用户名可以使用',
									type: 'success'
								})
							} else {
								this.$message({
									message: '用户名已被注册',
									type: 'warning'
								})
							}
							callback();
						}).catch(err => {
							callback(new Error(err.resultObj.mess));
						})

					},
					trigger: 'blur'
				}],
				userPass: [{
					validator: (rule, value, callback) => {
						if (value === '') {
							callback(new Error('请输入密码'));
						} else if (value.toString().length > 3 && value.toString().length < 16) {
							callback();
						} else {
							callback(new Error('密码长度不匹配'));
						}
					},
					trigger: 'blur'
				}],
				userPass1: [{
						validator: (rule, value, callback) => {
							if (value === '') {
								callback(new Error('请再次输入密码'));
							} else if (value === this.ruleForm.userPass) {
								callback();
							} else {
								callback(new Error('两次输入密码不一致'));
							}
						},
						trigger: 'blur'
					}

				],
				realname: [{
					validator: (rule, value, callback) => {
						let ereg = /[^\u4e00-\u9fa5]/;

						if (value === '') {
							callback(new Error('请输入真实姓名'));
						} else if (!ereg.test(value)) {
							callback();
						} else {
							callback(new Error('中文姓名验证不通过'));
						}
					},
					trigger: 'blur'
				}],
				idcard: [{
					validator: (rule, value, callback) => {
						let ereg = /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/;

						if (value === '') {
							callback(new Error('请输入身份证号'));
						} else if (ereg.test(value)) {
							callback();
						} else {
							callback(new Error('身份证号验证不通过'));
						}
					},
					trigger: 'blur'
				}],
				phone: [{
					validator: (rule, value, callback) => {
						let ereg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;

						if (value === '') {
							callback(new Error('请输入手机号'));
						} else if (ereg.test(value)) {
							callback();
						} else {
							callback(new Error('手机号验证不通过'));
						}
					},
					trigger: 'blur'
				}],
				type: [{
					validator: (rule, value, callback) => {
						if (value === 'F' || value === 'Z') {
							callback();
						} else {
							callback(new Error('请选择主体类型'));
						}
					},
					trigger: 'change'
				}],
				zzrFileName: [{
					validator: (rule, value, callback) => {
						if (!this.$store.state.register.upFile['zzrFileName'].name) {
							return callback(new Error('请选择自然人注册文件'));
						}
						callback();
					},
					trigger: 'change'
				}],
				frFileName: [{
					validator: (rule, value, callback) => {
						if (!this.$store.state.register.upFile['frFileName'].name) {
							return callback(new Error('请选择法人注册文件'));
						}
						callback();
					},
					trigger: 'change'
				}],
				wtqy: [{
					validator: (rule, value, callback) => {
						if (!value) {
							return callback(new Error('请输入委托企业'));
						}
						callback();
					},
					trigger: 'blur'
				}]
			}
		}
	},
	methods: {
		nextStep1(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.step.step1Show = false
					this.step.step2Show = true
					this.step.step3Show = false
				} else {
					return false
				}
			})
		},
		prevStep2() {
			this.step.step1Show = true
			this.step.step2Show = false
			this.step.step3Show = false
		},
		nextStep2(formName) {
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.step.step1Show = false
					this.step.step2Show = false
					this.step.step3Show = true
				} else {
					return false
				}
			})
		},
		prevStep3() {
			this.step.step1Show = false
			this.step.step2Show = true
			this.step.step3Show = false
		},
		register(formName) {
			this.$refs[formName].validate((valid) => {
				this.ruleForm.zzrFileName = this.$store.state.register.upFile['zzrFileName']
				this.ruleForm.frFileName = this.$store.state.register.upFile['frFileName']

				if (valid) {
					const loading = this.$loading({
						lock: true,
						text: '加载中...',
						spinner: 'el-icon-loading',
						background: 'rgba(0, 0, 0, 0.5)'
					});
					this.$store.dispatch('registerPage_register', this.ruleForm).then(() => {
						loading.close();
						if (this.$store.state.register.status == 'success') {
							this.$alert('注册成功了', '提示', {
								confirmButtonText: '确定',
								callback: action => {

								}
							});

						}
					})
				} else {
					console.log('error submit!!')
					return false
				}
			});
		}
	},
	mounted: function() {
		Util.title()
	},
	components: {
		imgWkUpfile,
	}
}
</script>
